<template>
	<view class="group-tabs">
		<ul>
			<li v-for="(item, index) in list" :key="index" @click="selectItem(index,item)">
				<view :class="{active:cIndex == (index+1)}">{{item.userKindDes}}</view>
			</li>
		</ul>
	</view>
</template>

<script>
	export default {
		props:{
			cIndex:{
				type:String,
				default:'1'
			},
			list:{
				type: Array,
				default: ()=>{
					return [];
				}
			}
		},
		methods:{
			selectItem(index,item){
				this.$emit('active', item);
			}
		}
	}
</script>

<style lang="scss">
.group-tabs {
	ul {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		list-style: none;
		padding: 0;
	}

	li {
		flex: 0 0 33.333333%;
		>view {
			height: 108upx;
			line-height: 108upx;
			box-sizing: border-box;
			border-radius: $uni-border-radius-base;
			border: 1px solid $uni-border-color;
			text-align: center;
			margin-bottom: 24upx;
			margin-left: 12upx;
			margin-right: 12upx;
			color: $uni-color-grey;
		}
		.active {
			color: $uni-color-blue;
			border-color: $uni-color-blue;
		}
	}
}
</style>
